<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 遇到yield就会暂停执行
      // 遇到next就会继续执行
      // 遇到next就会执行到下一个yield
      function* foo() {
        console.log("第一个");
        yield 1;
        console.log("第二个");
        yield 2;
        console.log("第三个");
        yield 3;
        return 44444444444;
      }
      const f = foo();
      //   const f1 = f.next();
      //   console.log(f1);
      //   const f2 = f.next();
      //   console.log(f2);
      //   const f3 = f.next();
      //   console.log(f3);
      //   const f4 = f.next();
      //   console.log(f4); //会返回return

      //   for (const i of f) {
      //     // console.log(i); 遇到return不会返回
      //     // 所谓的遍历就是执行
      //   }

      function* zks() {
        let zks1 = yield 1;
        console.log(zks1);
        let zks2 = yield 2;
        console.log(zks2);
        let zks3 = yield 3;
        console.log(zks3);
      }
      let zz = zks();
      //   原理是遇到第一个next会会产出第一个yield，但没有执行赋值操作 遇到下一个才会赋值操作
      const zz1 = zz.next("传递参数11111111");
      console.log(zz1.value, "zzz");
      const zz2 = zz.next("传递22222");
      console.log(zz2, "zzz2");
      const zz3 = zz.next("传递参数33333");
      console.log(zz3, "zzz3");

      //   用途用来处理异步函数

      function ajax(url, playload) {
        return new Promise(function (resolve, reject) {
          const hxhr = new XMLHttpRequest();
          hxhr.open("get", url, true);
          hxhr.send();
          hxhr.onreadystatechange = function () {
            if (hxhr.readyState === 4 && hxhr.status === 200) {
              resolve(hxhr.responseText);
            } else {
              reject(hxhr.responseText);
            }
          };
        });
      }
      function* ggg() {
        const res1 = ajax("1.json");
        console.log(res1);
      }

      function autoRun(data) {
        const ff = data();

        function nexts() {
          if (ff.next().done) return;
          ff.next().value.then((res) => {
            ff.next(res);
          });
        }
        nexts();
      }
        autoRun(ggg);
    </script>
  </body>
</html>
